import { Component, useState, useEffect } from 'react'
import { View, 
        
        Text,
        Swiper,
        SwiperItem,
        Image,
        Input,
        Picker,
        Button,
        Map,
       } from '@tarojs/components'
import { observer, inject } from 'mobx-react'

import Taro from '@tarojs/taro'

import './index.scss'

const renderSwipeItem=()=>{
  const arr=[
    {id:1,src:"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/198142/19/17312/87492/61935576E81dd755e/317feaf58d346260.jpg!cr_1053x420_4_0!q70.jpg.dpg"},
    {id:2,src:"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/215274/39/4721/340118/61939878E9efc0805/d0ff62ca9d4ca317.jpg!cr_1125x449_0_166!q70.jpg.dpg"},
    {id:3,src:"//m.360buyimg.com/mobilecms/s700x280_jfs/t1/141687/14/6020/146609/5f3e6b52Eb6e02c32/eab526890d501f9f.jpg!cr_1125x449_0_166!q70.jpg.dpg"}
  ]
  return arr.map(ele=>(
  <SwiperItem key={ele.id}>
    <Image src={ele.src}/>
  </SwiperItem>
  ))
}
const SwiperTip=props=>{
  let {value}=props
  return(
   <view className='qf-swiper-tip'>{
     [1,2,3].map((ele,idx)=>(
     <Text className={idx+1===value?"on":""}/>)
    ) }
   </view>
   )
}
export default inject('store')(observer(props=>{
  const [curIdx,setCurIdx]=useState(1)
  const [text,setText]=useState('')
  const [date,setDate]=useState('')
  const [show,setShow]=useState(false)

  const test=e=>{
    console.log('e',e)
  }
useEffect(()=>{
  Taro.getSetting().then(res=>{
    console.log('位置',res.authSetting['scope.userLocation'])
    if(!res.authSetting['scope.userLocation']) setShow(true)
  })
},[])

useEffect(()=>{
  console.log('触发调接口')
},[])
  const seach=()=>{
    console.log('调接口')
  }
const navToHere=()=>{
  console.log('打开微信内置地图')
}
  const swiperChange=e=>{
    console.log('swiper e',e)
  }
  let { counter } = props.store
   return(
    <View className='index'>
       <View className='qf-swiper'>
        <Swiper
        className='swiper'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        // vertical
        circular
        indicatorDots
        onChange={e=>setCurIdx(e.detail.current)}
        autoplay>
       {renderSwipeItem()}
      </Swiper>
      <SwiperTip value={curIdx}/>
      </View>
    
    <Input 
    value={text}
    onInput={e=>setText(e.detail.value)}
    style={{background:'#cccccc'}}
    onConfirm={search}
    />
    <Picker mode='date' onChange={e=>setDate(e.detail.value)}>
      <View className='picker'>
      {date||'选择日期'}
      </View>
    </Picker>
    <View className='modal' style={{display:show?'block':'none'}}>
      <View>提示</View>
      <View>
        <Button openType='openSetting'>同意</Button>
      </View>
    </View>
    <View className='shop'>
      <Map></Map>
      <Text>A店铺</Text>
      <Button onTap={navToHere}>导航去这里</Button>
      </View>
    </View>
  )
}))
